---
breakpoint: tablet
title: Pseudo styles
---

## Pseudo selectors

style props allow you to specify certain pseudo selectors. This allows you to add adhoc styling for particular interactions.

The available pseudo selectors you can use are:

- `_hover` for `:hover`
- `_active` for `:active`
- `_hoveractive` for `:hover:active`
- `_focus` for `:focus`
- `_visited` for `:visited`
- `_disabled` for `:disabled`

```jsx-live
<Box
  _hover={{ backgroundColor: 'primary', color: 'white' }}
  _active={{ backgroundColor: 'primary300', color: 'white' }}
  _focus={{ outline: '2px solid blue' }}
  tabIndex="-1"
  role="button"
  backgroundColor="primaryTint"
  color="primary800"
  padding="major-2"
>
  This is a box
</Box>
```

## Group pseudo selectors

style props allow you to style a child when its parent has a certain pseudo class and has the `role="group"` attribute.

The available pseudo selectors you can use are:

- `_groupHover` for `[role=group]:hover &`
- `_groupActive` for `[role=group]:active &`
- `_groupFocus` for `[role=group]:focus &`
- `_groupVisited` for `[role=group]:visited &`
- `_groupDisabled` for `[role=group]:disabled &`

```jsx-live
<Box
  backgroundColor="primaryTint"
  color="text400"
  padding="major-2"
  role="group"
>
  <Text _groupHover={{color: 'primary500'}}>This is a box</Text>
  <Text visibility="hidden" _groupHover={{visibility: 'visible'}}>, I am visible when my parent is hovered on</Text>
</Box>
```
